<template>
<div>
    <div class="upload-excel-mask" @click="close"></div>
    <div class="upload-excel-frame">
       <div class="upload-excel-title">
         <span>上传{{fileTypeName}}</span>
         <span @click="close"><i class="icon maliiconfont maliicon-img_comm_cancel"></i></span>
       </div>
       <br>
       <div class='upload-excel-upload-frame'>
          <el-upload
            class="upload-excel-upload-box"
            ref="upload"
            :headers="headers"
            :limit="uploadLimit"
            accept=".xls,.xlsx"
            :action="apiUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            :before-upload="beforeAvatarUpload"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
            <div slot="tip" class="upload-excel-tips">只支持1个文件上传，仅支持xls、xlsx文件</div>
          </el-upload>
       </div>

      <br>
      <br>
       <!--列表数据-->
       <egrid border class="page-list"
              :data="tableData"
              :columns="columns"
              :columns-schema="columnsSchema"
              :columns-props="columnsProps">
       </egrid>

       <!--分页组件-->
       <div class="pc-pagination-panel">
         <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                        @on-query="queryCallBackFn" :pageSizes="[10]">
         </pc-pagination>
       </div>
    </div>
</div>
</template>
<script>
  import {validateTips} from 'utils/tips';
  import PcPagination from 'components/form/pagination';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';

  export default {
    props: ['fileTypeName', 'apiUrl'],
    data() {
      return {
        headers: {},
        fileList: [],
        uploadLimit: 1,
        tableData: [],
        dataQueryForm: {
          logId: null
        },
        columns: [
          {
            label: '错误发生行',
            prop: 'cellRow'
          },
          {
            label: '错误发生列',
            prop: 'cellColumn'
          },
          {
            label: '错误值',
            prop: 'cellValue'
          },
          {
            label: '错误描述',
            prop: 'description'
          }
        ],
        columnsSchema: {
          '错误值': {minWidth: 220},
          '错误描述': {minWidth: 200}
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 60,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/malisk/server/excel/queryExcelImportLogDetailList'
        }
      };
    },
    mounted () {
      var that = this;
      that.$store.dispatch('get_access_token', (res) => {
        if (res) {
          that.headers.Authorization = 'Bearer ' + res;
        }
      });
    },
    components: {
      PcPagination
    },
    created() {
    },
    methods: {
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      submitUpload() {
        if (this.$refs.upload.uploadFiles.length === 0) {
          this.errorTip('请选择' + this.fileTypeName);
          return;
        }
        this.$refs.upload.submit();
      },
      beforeAvatarUpload(file) {
        var type = file.type;
        if (type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || type === 'application/vnd.ms-excel') {
          return true;
        } else {
          this.errorTip(validateTips.FILE_EXCEL);
          return false;
        }
      },
      handleSuccess(response, file, fileList) {
        if (response.code === 200) {
          if (response.result.hasError) {
            this.errorTip('部分数据有误，请查看日志');
            this.fileList = [];
            this.dataQueryForm.logId = response.result.importLogId;
            this.queryDataFn();
          } else {
            this.successTip('上传成功');
            this.$emit('success');
          }
        } else {
          this.errorTip(response.message);
          this.fileList = [];
        }
      },
      close() {
        this.$emit('close');
      },
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      queryCallBackFn(res) {
        this.tableData = res.result.list;
      },
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh(formName) {
        this.$refs[formName].resetFields();
        this.dataQueryForm.logId = null;
        this.queryDataFn();
      }
    }
  };
</script>
<style scoped>
  .upload-excel-mask{
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.5);
    position:fixed;
    top:0;
    left:0;
    z-index:999;
  }
  .upload-excel-frame{
    width:960px;
    height:680px;
    position:absolute;
    top:0vh;
    left:-185px;
    right:0;
    margin:0 auto;
    background:#fff;
    z-index:1000;
  }
  .upload-excel-title{
    line-height:40px;
    height:40px;
    border-bottom:1px solid #e6e6e6;
    box-sizing: border-box;
    padding-left:20px;
    padding-right:20px;
    display: flex;
    justify-content: space-between;
  }
  .upload-excel-title i{
    font-size:20px;
    cursor: pointer;
  }
  .upload-excel-upload-frame{
    box-sizing: border-box;
    padding:10px 20px;
    margin-top:-10px;
    position:relative;
  }
  .upload-excel-tips {
    margin-left: 0px;
    margin-top: 10px;
    height: 10px;
    font-size: 12px;
    color: #b2b2b2;
  }
</style>
